<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NuebWuPwAfiACV4swidGUNwcAHd8FcfM"></script>
    
    <title>羊群轨迹图</title>
 
</head>
<body>
  <div id="allmap"></div>
  
  
</body>
</html>
<script type="text/javascript">
 
var longitude1=${lists[1].longitude};
var latitude1=${lists[1].latitude};
 
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例
    map.centerAndZoom(new BMap.Point(longitude1,latitude1), 15);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.setMapStyle({style:'midnight'});
    var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
     scale: 0.6,//图标缩放大小
    strokeColor:'#fff',//设置矢量图标的线填充颜色
    strokeWeight: '2',//设置线宽
     });
var icons = new BMap.IconSequence(sy, '10', '30');
 

 

 
 
 
var longitude=new Array();
var latitude=new Array();
    var index=0;
    <c:forEach items="${lists}" var="lst">
 
        var longitu=${lst.longitude};
        var  latitu=${lst.latitude}
        longitude.push(longitu);
        latitude.push(latitu);
        
        index++; 
    </c:forEach>
    
var size=${lists.size()};  
   var pois=new Array();
 for(var i=0;i<size;i++){
	 var log=longitude[i];
	 var  lat=latitude[i];
	 pois.push(new BMap.Point(log,lat));
	 console.log("经纬度："+log+"-----"+lat+"-----"+index);
 }
 
 var rr=pois.length;
  console.log("你好"+rr);  

/*   var pois2 = [
          	new BMap.Point(113.593232, 44.140884),
          //	new BMap.Point(114.337427, 43.46965),
          	new BMap.Point(113.593226, 44.140896),
          	new BMap.Point(113.59323, 44.140893),
          ]; */
 

/*    var pois1=new Array;
var longitude1=${lists[1].longitude};
var latitude1=${lists[1].latitude};
var longitude2=${lists[2].longitude};
var latitude2=${lists[2].latitude};
var longitude3=${lists[3].longitude};
var latitude3=${lists[3].latitude};
 
pois1.push(new BMap.Point( 113.59323,44.140884));
pois1.push(new BMap.Point  (113.59325, 44.140873));
pois1.push(new BMap.Point(113.59322,44.14091)); */
 
/*
console.log("你好11111"+pois1);
        
var pois2 = new Array(); 
pois2.push(pois);
pois2.push(pois1); */ 
  
  
/* for(var i=0;i<2;i++){   */
   var polyline =new BMap.Polyline(pois, {
    enableEditing: false,//是否启用线编辑，默认为false
    enableClicking: true,//是否响应点击事件，默认为true
    icons:[icons],
    strokeWeight:'8',//折线的宽度，以像素为单位
    strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
    strokeColor:"#18a45b" //折线颜色
    });
   map.addOverlay(polyline);          //增加折线
 //}

  
</script>
